<template>
  <view class="container">
    <view class="content">
      <text class="text">{{ deviceName }}</text>
      <view class="image-container">
        <image class="image" :src="imageUrl"></image>
      </view>
    </view>
  </view>
</template>



<script>
	export default {
		name:"connection-status",
		data() {
			return {
				deviceName:"臂式电子血压计",
				imageUrl:"../../static/images/connection_success.png"
			};
		}
	}
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.text {
  font-size: 16px; /* 文字稍微大一些 */
  font-weight: bold; /* 文字加粗 */
  margin-bottom: 10px; /* 文字和图片之间的间隔 */
}

.image-container {
  margin-top: 10px; /* 图片和文字之间的间隔 */
}

.image {
  width: 280rpx;
  height: 260rpx;
  margin: auto; /* 居中 */
}
</style>